<template>
  <div class="container">
    <div class="title">{{ artcleinfo.title }}</div>
    <div class="time">发布日期:{{ artcleinfo.time }}</div>
    <div class="author">
      <div class="author_profile">
        <img :src="author_profile" alt="">
      </div>
      <div class="author_name">{{ artcleinfo.author }}</div>
      <div v-if="state !== 0" class="attention" @click="addNotice(artcleinfo.author)">关注+</div>
      <div v-if="state === 0" class="attentioned">已关注</div>
    </div>
    <div class="text">{{ artcleinfo.content }}</div>
    <div class="images">
      <!-- <img :src="'data:image/png;base64,' + artcleinfo.img " alt=""> -->
      <img :src="image" alt="">
    </div>
    <div class="like">
      <div v-if="likestauts.like_status === undefined" class="likeicon" @click="addLike(artcleinfo.id)"></div>
      <div v-if="likestauts.like_status === 0" class="likeicons" @click="cancelLike(artcleinfo.id)"></div>
      <div class="likenums">{{ likenumsinfo.likenums }}</div>
    </div>
    <div class="commentContainer">
      <ul>
        <li v-for="(item, index) in msgList" :key="index">
          <div class="item">
            <comment
              :deep="true"
              :num="index"
              :comment="item"
              @confirm="handle"
            />
          </div>
        </li>
      </ul>
      <div class="control">
        <textarea v-model="message" type="text" class="c-msg"></textarea>
        <button class="c-btn" @click="queRen">添加评论</button>
      </div>
    </div>
  </div>
</template>

<script>
import 'element-plus/theme-chalk/index.css'
import comment from '../components/comment.vue'
export default {
  name:'Content',
  // eslint-disable-next-line vue/no-unused-components
  components:{ comment },
  data() {
    return {
      author_profile:'../static/images/keqing.png',
      url:'localhost:3007',
      likeVisible: 0,
      likenumsinfo: {},
      likestauts:{},
      image: '',
      msgList: [
        {
          name: '迪卢克',
          content: '不错不错',
          count: 0,
          children: [{
            name: 'ghx',
            content: '厉害'
          }]
        }
      ],
      artcleinfo:{},
      state:''
    }
  },
  created() {
    this.artcleinfo =  this.$route.query
    console.log(this.artcleinfo,'------info')
    this.getLikeNums()
    console.log(this.artcleinfo.img, '--------this.artcleinfo.img')
    const images = 'http://localhost:3007/uploads/' + this.artcleinfo.img
    this.image = images
    // const images = 'localhost:3007' + this.artcleinfo.img+'.png'
    // this.artcleinfo.img = images
    // console.log(this.artcleinfo.img, '------artcleinfo.img')
    // const images = this.artcleinfo
    // const blob = new Blob([images], {
    //   type: 'image/png'
    // })
    // const url = window.URL.createObjectURL(blob)
    // this.artcleinfo.img = url
    // console.log(this.artcleinfo.img)
  },
  // created() {
  //   this.artcleinfo =  this.$route.query
  //   const image = this.artcleinfo.img.slice(9)
  //   this.artcleinfo.img = image
  //   const images = `data:image/png;base64,${this.artcleinfo.img}`
  //   this.artcleinfo.img = images
  //   console.log(this.artcleinfo.img,'-----images')
  // },
  methods: {
    queRen () {
      const msg = this.message
      this.message = ''
      const { name, content } = { name: 'ghx', content: msg }
      this.msgList.push({ name, content })
    },
    /**
     * 点赞数量
     */
    add (item) {
      item.count++
    },
    /**
     * 监听子组件的添加回复事件
     */
    handle (childItem, index) {
      console.log('被点击了')
      this.msgList[index].children.push({ name: '迪卢克', content: childItem })
    },
    async addNotice(data) {
      const authorname = { 'author':data }
      const res = await this.$api.notice.addNotice(authorname)
      if(res.data.status !== 0) {
        alert('关注失败!')
      }else {
        alert('关注成功!')
        this.state = res.data.status
      }
    },
    async getLikeNums() {
      const idnum = this.artcleinfo.id
      console.log(idnum,'----id')
      const res = await this.$api.artcleList.getLikeNums(idnum)
      const { data:{ numdata: likenumsinfo } } = res
      this.likenumsinfo = {
        ...likenumsinfo
      }
      const { data:{ statusdata:likestauts } } = res
      this.likestauts = {
        ...likestauts
      }
    },
    async addLike(data) {
      const addlikeid = { 'id':data }
      const res = await this.$api.artcleList.addLike(addlikeid)
      if(res.data.status === 0) {
        alert('点赞成功!')
      }else{
        alert('点赞失败!')
      }
      this.getLikeNums()
      this.likeVisible = res.data.data.affectedRows
      console.log(this.likeVisible,'--------likeVisible')
    },
    async cancelLike(data) {
      const cancellikeid = { 'id':data }
      const res = await this.$api.artcleList.cancelLike(cancellikeid)
      if(res.data.status === 0) {
        alert('取消点赞成功!')
      }else{
        alert('取消点赞失败!')
      }
      this.getLikeNums()
      this.likeVisible = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 50px 300px 0 300px;
  display: flex;
  flex-direction: column;
  .title {
    font-size: 30px;
    color: #000;
    margin-bottom: 20px;
  }
  .author {
    position:relative;
    margin-bottom: 50px;
    .author_profile {
      width: 50px;
      height: 50px;
      padding-top: 4.3px;
      padding-left: 5px;
      background-image: url("./images/profilephoto.png");
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: 0 0;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .author_name {
      width: 50px;
      text-align: center;
      font-size: 12px;
      color: #000;
    }
    .attention {
      position: absolute;
      top: 10px;
      left: 60px;
      width: 50px;
      height: 30px;
      border-radius: 10px;
      background-color: blue;
      color: #fff;
      text-align:center;
      line-height: 30px;
    }
    .attentioned {
      position: absolute;
      top: 10px;
      left: 60px;
      width: 50px;
      height: 30px;
      border-radius: 10px;
      background-color: pink;
      color: #fff;
      text-align:center;
      line-height: 30px;
    }
  }
  .images {
      width: 100%;
      height: 100%;
      margin-bottom: 50px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  .like {
    width: 100px;
    height: 50px;
    margin-bottom: 50px;
    display: flex;
    .likeicon {
      width: 50px;
      height: 50px;
      background-image: url('./images/dislike.png');
      background-position: 0 0;
      background-size: 100% 100%;
      margin-right: 5px;
    }
    .likeicons {
      width: 50px;
      height: 50px;
      background-image: url('./images/like.png');
      background-position: 0 0;
      background-size: 100% 100%;
      margin-right: 5px;
    }
    .likenums {
      font-size: 20px;
      line-height: 60px;
    }
  }
  .time{
      position: absolute;
      top: 125px;
      left: 1000px;
    }
  .text {
    width: 840px;
    margin-bottom: 50px;
  }
  .commonetContainer {
    h3 {
      color: red;
      font-weight: 600;
    }
  }
  .commentContainer{
  width: 400px;
  margin-bottom: 100px;;
  .item{
    box-sizing: border-box;
    width: 100%;
    margin: 10px 5px;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
    border-top: 1px solid #ccc;
    .relist{
      border-top: 1px solid #ccc;
    }
  }
  .control{
    width: 100%;
    display: flex;
    .c-msg{
      flex: 4;
    }
    .c-btn{
      flex: 1;
    }
  }
}
}

</style>

